<template>
  <div :class="prefixCls">
    <Row :class="`${prefixCls}-top`">
      <Col :span="9" :class="`${prefixCls}-col`">
        <Row>
          <Col :span="8">
            <div :class="`${prefixCls}-top__avatar`">
              <img width="70" :src="avatar" />
              <span>{{ userInfo.userName }}</span>
            </div>
          </Col>
          <Col :span="16">
            <div :class="`${prefixCls}-top__detail`">
              <p>
                <Icon icon="ant-design:phone-filled" />{{ t('sys.login.phoneNumber') }}：
                {{ userInfo.phoneNumber }}
              </p>
              <p>
                <Icon icon="ant-design:amazon-circle-filled" />{{ t('sys.login.email') }}：
                {{ userInfo.email }}
              </p>
              <p>
                <Icon icon="map:unisex" />{{ t('sys.login.sex') }}：
                {{ userInfo.sex }}
              </p>
              <p>
                <Icon icon="material-symbols:image-aspect-ratio" />{{ t('sys.login.age') }}：
                {{ userInfo.age }}
              </p>
              <p>
                <Icon icon="mdi:human-male-height" />{{ t('sys.login.height') }}：
                {{ userInfo.height }}
              </p>
              <p>
                <Icon icon="icon-park-twotone:weight" />{{ t('sys.login.weight') }}：
                {{ userInfo.weight }}
              </p>
              <p>
                <Icon icon="mdi:clock-star-four-points" />{{ t('sys.login.points') }}：
                {{ userInfo.points }}
              </p>
            </div>
          </Col>
        </Row>
      </Col>
      <Col :span="7" :class="`${prefixCls}-col`">
        <CollapseContainer title="标签" :canExpand="false">
          <template v-for="tag in tags" :key="tag">
            <Tag class="mb-2 tag">
              {{ t(`routes.accountCenter.userInfo.${tag}`) }}
            </Tag>
          </template>
        </CollapseContainer>
      </Col>
      <Col :span="8" :class="`${prefixCls}-col`">
        <CollapseContainer :class="`${prefixCls}-top__team`" title="团队" :canExpand="false">
          <div v-for="(team, index) in teams" :key="index" :class="`${prefixCls}-top__team-item`">
            <Icon :icon="team.icon" :color="team.color" />
            <span> {{ t(`routes.accountCenter.userInfo.${team.title}`) }}</span>
          </div>
        </CollapseContainer>
      </Col>
    </Row>
  </div>
</template>

<script lang="ts" setup>
  import { CollapseContainer } from '/@/components/Container'
  import Icon from '/@/components/Icon'
  import { Col, Row, Tag } from 'ant-design-vue'
  import { computed, onMounted, reactive } from 'vue'
  import headerImg from '/@/assets/images/header.jpg'
  import { useUserStore } from '/@/store/modules/user'
  import { tags, teams } from './data'
  import { getUserInfo } from '/@/api/sys/user'
  import { SexEnum } from '/@/enums/sexEnum'
  import { useI18n } from '/@/hooks/web/useI18n'
  const { t } = useI18n()

  interface userInfo {
    userName?: String
    phoneNumber?: string
    sex?: SexEnum
    height?: string
    age?: Number
    weight?: string
    email?: string
    points?: Number
  }

  const userStore = useUserStore()

  const prefixCls = 'account-center'
  const avatar = computed(() => userStore.getUserInfo.avatar || headerImg)

  const userInfo = reactive<userInfo>({
    userName: '',
    phoneNumber: '',
    sex: undefined,
    email: '',
    age: 0,
    height: '',
    weight: '',
    points: 0,
  })
  onMounted(async () => {
    const res = (await getUserInfo()).data
    userInfo.userName = res.userName
    userInfo.phoneNumber = res.phoneNumber
    userInfo.sex = res.sex
    userInfo.email = res.email
    userInfo.age = res.age
    userInfo.height = res.height
    userInfo.weight = res.weight
    userInfo.points = res.points
  })
</script>
<style lang="less" scoped>
  .account-center {
    &-col:not(:last-child) {
      padding: 0 10px;

      &:not(:last-child) {
        border-right: 1px dashed rgb(206 206 206 / 50%);
      }
    }

    &-top {
      margin: 16px 16px 12px;
      padding: 10px;
      border-radius: 3px;
      background-color: @component-background;

      &__avatar {
        text-align: center;

        img {
          margin: auto;
          border-radius: 50%;
        }

        span {
          display: block;
          font-size: 20px;
          font-weight: 500;
        }

        div {
          margin-top: 3px;
          font-size: 12px;
        }
      }

      &__detail {
        margin-top: 15px;
        padding-left: 20px;
      }

      &__team {
        &-item {
          display: inline-block;
          padding: 4px 24px;
        }

        span {
          margin-left: 3px;
        }
      }
    }

    &-bottom {
      margin: 0 16px 16px;
      padding: 10px;
      border-radius: 3px;
      background-color: @component-background;
    }
  }
  .tag {
    margin: 5px;
  }
</style>
